<!-- 企业服务-新申请 -->
<template>
    <div class="service-apply-contain">
        <Header></Header>
        <div class="nav-logo">
            <img src="../../assets/logo/logo-login.png" class="inline-block mr10">
            <span class="titils inline-block ml20 pl20 border-l fs24 black">
				企业服务
			</span>
        </div>
        <div class="content-contain mt40 mb40">
            <div class="container pb30 white-bg flex-column-center">
                <ul class="form-contain">
                    <li class="mb20">
                        <div>公司名称：</div>
                        <el-input v-model="ruleForm.companyName" placeholder="请输入" class="form-item"></el-input>
                    </li>
                    <li class="mb20">
                        <div>信用代码：</div>
                        <el-input v-model="ruleForm.creditCode" placeholder="请输入" class="form-item"></el-input>
                    </li>
                    <li class="mb20">
                        <div>联&nbsp;系 &nbsp; 人：</div>
                        <el-input v-model="ruleForm.linkMan" placeholder="请输入" class="form-item"></el-input>
                    </li>
                    <li class="mb20">
                        <div>联系电话：</div>
                        <el-input v-model="ruleForm.phone" placeholder="请输入" class="form-item"></el-input>
                    </li>
                    <li class="mb20">
                        <div>上传文件：</div>
                        <el-upload
                            class="avatar-uploader"
                            action="#"
                            :http-request="uploadFaceFiles"
                            multiple
                            :file-list="fileList"
                            :on-success="handleAvatarSuccess"
                            :on-remove="removeFile"
                            :before-upload="beforeAvatarUpload">
                            <el-button size="small">点击上传</el-button>
                        </el-upload>
                    </li>
                    <li class="mb20">
                        <div class="white">联系电话：</div>
                        <div>
                            <el-button type="primary" @click="handleSubmit" style="width: 210px"
                                       size="large">提交
                            </el-button>
                            <el-button icon="el-icon-download" size="large" @click="downloadFile">下载模板</el-button>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>
import Header from '@/views/components/header/header'
import Footer from '@/views/components/header/footer'
import {changePw, serviceApply} from '@/api/enterprise'
import {getAccountById} from "@/api/enterprise";
import {checkCode, sendValidCode} from "@/api/register";
import {checkResponse} from "@/utils";
import { del } from '@/api/enterprise/work/job'
import {filesAnon} from "@/api/base";

export default {
    name: 'ForgetPassword',
    components: {
        Header,
        Footer
    },
    data() {
        return {
            ruleForm: {
                companyName: '',
                creditCode: '',
                linkMan: '',
                phone: '',
                fileIds: []
            },
            fileList: []
        }
    },
    created() {
    },
    methods: {
        uploadFaceFiles(params) {
            var vm = this
            const file = params.file,
                fileType = file.type,
                fileName = file.name,
                isImage = fileType.indexOf('pdf') != -1,
                isLt2M = file.size / 1024 / 1024 < 2
            // 这里常规检验，看项目需求而定
            // if (!isImage) {
            //   this.$message.error("只能上传文件格式pdf");
            //   return;
            // }
            // if (!isLt2M) {
            //   this.$message.error("只能上传文件大小小于2M");
            //   return;
            // }
            // 根据后台需求数据格式
            const form = new FormData()
            // 文件对象
            form.append('file', file)
            // 项目封装的请求方法，下面做简单介绍
            filesAnon(form).then(res => {
                vm.ruleForm.fileIds.push(res.id);
                vm.fileList.push(file);
            }).catch(res => {
                //this.$message.error("上传失败，请重新上传");
            })
        },
        handleAvatarSuccess(res, file) {
            console.log(res);
            console.log(file);
        },
        beforeAvatarUpload(file) {
            // const isJPG = file.type === 'image/jpeg';
            // const isLt2M = file.size / 1024 / 1024 < 2;
            //
            // if (!isJPG) {
            //     this.$message.error('上传头像图片只能是 JPG 格式!');
            // }
            // if (!isLt2M) {
            //     this.$message.error('上传头像图片大小不能超过 2MB!');
            // }
            // return isJPG && isLt2M;
        },
        removeFile(file, fileList) {
            console.log(file);
            const fileIndex = this.fileList.findIndex(item => item.uid == file.uid);
            console.log(fileIndex);
            if (fileIndex != -1) {
                this.fileList.splice(fileIndex)
                this.ruleForm.fileIds.splice(fileIndex)
            }
        },
        downloadFile() {
            window.open('https://xmjob.oss-cn-hangzhou.aliyuncs.com/%E5%85%A5%E5%9B%AD%E7%94%B3%E8%AF%B7%E6%A8%A1%E6%9D%BF/%E5%85%A5%E5%9B%AD%E7%94%B3%E8%AF%B7%E8%A1%A8.docx');
        },
        handleSubmit() {
            let app = this;
            let obj = {...this.ruleForm};
            obj.fileIds = obj.fileIds.join(',')
            serviceApply(obj).then(res => {
                if (checkResponse(res)) {
                    this.$confirm('提交成功，你的申请编号是' + res.datas.serverNo, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        app.routerLink('/service-search?serverNo=' + res.datas.serverNo);
                    })
                }
            });
        }
    }
}
</script>

<style lang="scss">
@import url('../../assets/styles/enterprise/common.css');

.service-apply-contain {
    .border {
        border: 1px solid #3DABC4;
        color: #3DABC4;
    }

    .c777 {
        color: #777;
    }

    .green {
        color: #5EA08E;
    }

    .fs75 {
        font-size: 75px;
    }

    .steps-contain {
        width: 500px;
        margin-left: 145px;
    }

    .form-contain {
        margin-top: 75px;
        min-height: 270px;

        li {
            display: flex;
            align-items: center;
        }

        .form-item {
            width: 340px;
        }
    }

    .tips-text {
        color: #9F9F9F;
    }

    .el-step__head.is-success {
        color: #5EA08E;
        border-color: #5EA08E;

        .el-step__icon {
            background: #5EA08E;
        }

        .el-step__icon-inner {
            color: #fff;
        }
    }

    .el-step__title.is-success {
        color: #5EA08E;
    }

    .el-step__head.is-process {
        color: #fff;
        border-color: #9A9A9A;
    }

    .el-step__title.is-process {
        color: #9A9A9A;
        font-weight: 400;
    }

    .el-step__head.is-wait {
        color: #fff;
        border-color: #9A9A9A;
    }

    .el-step__title.is-wait {
        color: #9A9A9A;
    }

    .el-step__icon {
        background: #9A9A9A;
    }

    .el-step__main {
        position: relative;
        left: -23px;
    }

    .code-contain {
        position: relative;

        .code-btn {
            width: 100px;
            height: 48px;
            line-height: 48px;
            position: absolute;
            top: 0;
            right: 0;
        }
    }


    .el-input--medium .el-input__inner {
        height: 48px;
        line-height: 48px;
    }

    .nav {
        background: #f5f5f5;

        .nav-left {
            display: none;
        }
    }

    .nav_conter {
        display: none !important;
    }

    .nav-logo {
        width: 1200px;
        margin: 0 auto;
        padding-top: 50px;
    }

    .content-contain {
        min-height: calc(100vh - 355px)
    }

    .container {
        width: 780px;
        min-height: 480px;
        margin: 0 auto;
        padding-top: 0;
        padding-left: 150px;
        padding-right: 150px;
        box-shadow: 10px 10px 15px #ECECEC;

        .auxiliary-text {
            color: #999999;
            vertical-align: bottom;
        }

        .nex-btns {
            width: 340px;
            margin: 0 auto;
        }

        .error-text {
            height: 20px;
        }
    }
}

</style>
